<template>
	<view class="container user-setting yuan-form">
		<view class="setting-list">
			<view class="list-title">头像</view>

			<!-- <view class="list-header" v-if="selHeadInfo">
				<image class="photo-img" :src="selHeadInfo" mode="aspectFit" @click="editPhoto">
				</image>
			</view>
			<view class="list-header header-def" v-else-if="!userInfo.headimgUrl" @click="editPhoto">点击更换</view>
			<view class="list-header" v-else-if="userInfo.headimgUrl">
				<image class="photo-img" :src="userInfo.headimgUrl" mode="aspectFit" @click="editPhoto">
				</image>
			</view> -->
			<view class="list-header">
				<button class="photo-btn" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
					<image class="photo-img" :src="selHeadInfo||userInfo.headimgUrl||($fileUrl+'head.png')"></image>
				</button>
			</view>
			

		</view>
		<!-- <view class="yuan-form-list">
			<view class="yuan-form-label yuan-label-must">昵称:</view>
			<input class="yuan-input" v-model="formData.name" placeholder="请输入昵称" placeholder-class="placeholder-style">
		</view> -->
		<view class="yuan-form-list">
			<view class="yuan-form-label yuan-label-must">昵称:</view>
			<input class="yuan-input" placeholder-class="placeholder-style" v-model="formData.name" type="nickname"
				placeholder="请输入昵称" />
				
		</view>
		<!-- <view class="yuan-form-row-list">
			<view class="yuan-form-label" style="margin-bottom: 20rpx;">个人简介：</view>
			<textarea class="yuan-textarea" v-model="formData.name" placeholder="请输入简介" placeholder-class="placeholder-style">
			</textarea>
		</view> -->
		<view class="bottom-btn-box">
			<view class="yuan-btn btn-success bottom-btn" @click="clickSave">保存信息</view>
			<view class="yuan-btn btn-default bottom-btn" @click="clickOut">退出登录</view>
		</view>

	</view>
</template>

<script setup lang="ts">
	import { onMounted, reactive, ref } from 'vue';
	import api from '../../common/api';
	import { chooseImage, getStorage, goBack, hideLoading, setStorage, showLoading, showToast, uploadFile } from '../../common/util';
	import commonStore from '../../store/commonStore';
	const selHeadInfo = ref('')
	const formData = reactive({ name: '大头' })
	const editPhoto = () => {
		chooseImage((res) => {
			selHeadInfo.value = res.tempFilePaths[0] + ''
		})

	}
	onMounted(async () => {
		getUserInfo()
	})
	const userInfo = ref<any>({})
	const getUserInfo = async () => {
		userInfo.value = getStorage('userAuth') || {}
		formData.name = userInfo.value.nickName
	}
	const clickSave = async () => {
		showLoading()
		try {
			let avatar = ''
			if (selHeadInfo.value) {
				const fileRes : any = await uploadFile(selHeadInfo.value)
				const data : any = JSON.parse(fileRes.data)
				avatar = data.msg
				selHeadInfo.value = ''
			} else {
				avatar = userInfo.value.headimgUrl
			}

			const res = await api.setUserInfo({
				"nickname": formData.name,
				"headPortrait": avatar
			})
			showToast('保存成功')
			const newData = getStorage('userAuth') || {}
			newData.nickName = formData.name
			newData.headimgUrl = avatar
			setStorage("userAuth", newData);
			getUserInfo()
			commonStore.commit('addReload', 'userIndex')
			goBack()
		} finally {
			hideLoading()
		}
	}
	const clickOut = () => {
		uni.showModal({
			title: '提示',
			content: '你确定退出登录嘛？',
			confirmText: '立即退出',
			success: (res) => {
				if (res.confirm) {
					setStorage("userAuth", '');
					setStorage("userInfo", '');
					commonStore.commit('addReload', 'userIndex')
					commonStore.commit('addReload', 'index')
					uni.switchTab({
						url: '/pages/my/my'
					})
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});

	}
	const onChooseAvatar = (e) => {
		const { avatarUrl } = e.detail 
		selHeadInfo.value=avatarUrl
	}
</script>

<style lang="scss">
	.user-setting {
		padding: 30rpx;
		background-color: #fff;

		.setting-list {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 20rpx;
			border-radius: 8rpx;
			width: 100%;
			padding: 20rpx 0;
			border-bottom: solid 1px #eee;
		}

		.list-title {
			font-size: 30rpx;
			color: #333;
		}

		.list-info {
			flex-grow: 1;
			text-align: right;
			font-size: 26rpx;
			color: #232323;
		}

		.list-ico {
			font-size: 28rpx;
		}

		.list-header {
			height: 120rpx;
			width: 120rpx;
			border-radius: 120rpx;
			border: solid 1px #eee
		}

		.header-def {
			background-color: #F9F9F9;
			font-size: 24rpx;
			text-align: center;
			line-height: 120rpx;
		}
		.photo-btn{
			padding: 0;
			border-radius: 120rpx;
		}
		.photo-img {
			width: 120rpx;
			height: 120rpx;
			display: block;
			border-radius: 120rpx;
		}

		.bottom-btn-box {
			margin-top: 100px;
		}

		.bottom-btn {
			height: 88rpx;
			border-radius: 88rpx;
			margin-bottom: 30rpx;
		}
	}
</style>